<template>
  <div class="dashboard-container">
    <h1 style="text-align: center;">捷卓运营管理系统</h1>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, shallowRef } from 'vue'
import {
  Server,
  Cpu,
  HardDrive,
  Activity,
  FolderKanban,
  FileText,
  Receipt,
  ClipboardList,
  Package,
  Users,
  AlertCircle,
  AlertTriangle,
  Info
} from 'lucide-vue-next'
import Chart from 'chart.js/auto'

const lastUpdate = ref(new Date().toLocaleTimeString('zh-CN'))
const requestPeriod = ref('today')
const trafficPeriod = ref('today')
const requestChart = ref<HTMLCanvasElement | null>(null)
const trafficChart = ref<HTMLCanvasElement | null>(null)
const requestChartInstance = shallowRef<Chart | null>(null)
const trafficChartInstance = shallowRef<Chart | null>(null)

const stats = ref([
  {
    title: '在线服务器',
    value: '24',
    trend: '+2',
    trendText: '较昨日',
    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    icon: Server,
    trendClass: 'trend-up'
  },
  {
    title: 'CPU使用率',
    value: '45%',
    trend: '-5%',
    trendText: '较昨日',
    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    icon: Cpu,
    trendClass: 'trend-down'
  },
  {
    title: '内存使用',
    value: '68%',
    trend: '+3%',
    trendText: '较昨日',
    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    icon: HardDrive,
    trendClass: 'trend-up'
  },
  {
    title: '网络流量',
    value: '2.4TB',
    trend: '+12%',
    trendText: '较昨日',
    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    icon: Activity,
    trendClass: 'trend-up'
  },
  {
    title: '项目数量',
    value: '156',
    trend: '+8',
    trendText: '本月新增',
    gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    icon: FolderKanban,
    trendClass: 'trend-up'
  },
  {
    title: '合同统计',
    value: '89',
    trend: '+5',
    trendText: '待审核',
    gradient: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)',
    icon: FileText,
    trendClass: 'trend-up'
  },
  {
    title: '发票统计',
    value: '234',
    trend: '+15',
    trendText: '本月开具',
    gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
    icon: Receipt,
    trendClass: 'trend-up'
  },
  {
    title: '工单统计',
    value: '67',
    trend: '-12',
    trendText: '待处理',
    gradient: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
    icon: ClipboardList,
    trendClass: 'trend-down'
  },
  {
    title: '资产统计',
    value: '1,245',
    trend: '+23',
    trendText: '本月新增',
    gradient: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
    icon: Package,
    trendClass: 'trend-up'
  },
  {
    title: '用户统计',
    value: '3,456',
    trend: '+89',
    trendText: '活跃用户',
    gradient: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)',
    icon: Users,
    trendClass: 'trend-up'
  }
])

const servers = ref([
  { name: 'Web-Server-01', ip: '192.168.1.10', cpu: 45, memory: 62, status: 'healthy' },
  { name: 'Web-Server-02', ip: '192.168.1.11', cpu: 38, memory: 55, status: 'healthy' },
  { name: 'DB-Server-01', ip: '192.168.1.20', cpu: 72, memory: 81, status: 'warning' },
  { name: 'Cache-Server-01', ip: '192.168.1.30', cpu: 28, memory: 45, status: 'healthy' },
  { name: 'API-Server-01', ip: '192.168.1.40', cpu: 56, memory: 68, status: 'healthy' }
])

const alerts = ref([
  { id: 1, level: 'critical', title: 'DB-Server-01 内��使用率超过80%', time: '5分钟前' },
  { id: 2, level: 'warning', title: 'Web-Server-03 响应时间过长', time: '15分钟前' },
  { id: 3, level: 'info', title: '系统备份已完成', time: '1小时前' },
  { id: 4, level: 'warning', title: '磁盘空间不足 (< 20%)', time: '2小时前' }
])

const getProgressColor = (value: number) => {
  if (value >= 80) return '#f56c6c'
  if (value >= 60) return '#e6a23c'
  return '#67c23a'
}

const getAlertIcon = (level: string) => {
  switch (level) {
    case 'critical':
      return AlertCircle
    case 'warning':
      return AlertTriangle
    default:
      return Info
  }
}

const getAlertType = (level: string) => {
  switch (level) {
    case 'critical':
      return 'danger'
    case 'warning':
      return 'warning'
    default:
      return 'info'
  }
}

const initRequestChart = () => {
  if (!requestChart.value) return

  const ctx = requestChart.value.getContext('2d')
  if (!ctx) return

  requestChartInstance.value = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
      datasets: [
        {
          label: '2XX',
          data: [1200, 1900, 3000, 5000, 4200, 3800, 2800],
          borderColor: '#67c23a',
          backgroundColor: 'rgba(103, 194, 58, 0.1)',
          tension: 0.4,
          fill: true
        },
        {
          label: '4XX',
          data: [200, 300, 450, 600, 520, 480, 380],
          borderColor: '#e6a23c',
          backgroundColor: 'rgba(230, 162, 60, 0.1)',
          tension: 0.4,
          fill: true
        },
        {
          label: '5XX',
          data: [50, 80, 120, 150, 130, 110, 90],
          borderColor: '#f56c6c',
          backgroundColor: 'rgba(245, 108, 108, 0.1)',
          tension: 0.4,
          fill: true
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: 'top',
          labels: {
            color: '#606266',
            usePointStyle: true,
            padding: 15
          }
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          grid: {
            color: '#f0f0f0'
          },
          ticks: {
            color: '#909399'
          }
        },
        x: {
          grid: {
            color: '#f0f0f0'
          },
          ticks: {
            color: '#909399'
          }
        }
      }
    }
  })
}

const initTrafficChart = () => {
  if (!trafficChart.value) return

  const ctx = trafficChart.value.getContext('2d')
  if (!ctx) return

  trafficChartInstance.value = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
      datasets: [
        {
          label: '入站流量 (GB)',
          data: [120, 190, 300, 500, 420, 380, 280],
          backgroundColor: 'rgba(64, 158, 255, 0.8)',
          borderRadius: 6
        },
        {
          label: '出站流量 (GB)',
          data: [80, 150, 250, 420, 350, 320, 240],
          backgroundColor: 'rgba(103, 194, 58, 0.8)',
          borderRadius: 6
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: 'top',
          labels: {
            color: '#606266',
            usePointStyle: true,
            padding: 15
          }
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          grid: {
            color: '#f0f0f0'
          },
          ticks: {
            color: '#909399'
          }
        },
        x: {
          grid: {
            display: false
          },
          ticks: {
            color: '#909399'
          }
        }
      }
    }
  })
}

const updateData = () => {
  servers.value = servers.value.map(server => ({
    ...server,
    cpu: Math.max(20, Math.min(90, server.cpu + Math.random() * 10 - 5)),
    memory: Math.max(30, Math.min(95, server.memory + Math.random() * 8 - 4))
  }))

  lastUpdate.value = new Date().toLocaleTimeString('zh-CN')
}

let updateInterval: number

onMounted(() => {
  initRequestChart()
  initTrafficChart()
  updateInterval = window.setInterval(updateData, 3000)
})

onUnmounted(() => {
  if (updateInterval) {
    clearInterval(updateInterval)
  }
  if (requestChartInstance.value) {
    requestChartInstance.value.destroy()
  }
  if (trafficChartInstance.value) {
    trafficChartInstance.value.destroy()
  }
})
</script>

<style scoped>
.dashboard-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 24px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.dashboard-title {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.last-update {
  color: #909399;
  font-size: 14px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon .icon {
  width: 28px;
  height: 28px;
  color: white;
}

.stat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  line-height: 1.2;
}

.stat-trend {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.trend-up {
  color: #67c23a;
}

.trend-down {
  color: #f56c6c;
}

.trend-text {
  color: #909399;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.chart-content {
  height: 280px;
}

.bottom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.server-card,
.alert-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.server-list,
.alert-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.server-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.server-item:hover {
  background: #f5f7fa;
}

.server-info {
  flex-shrink: 0;
  width: 140px;
}

.server-name {
  font-weight: 500;
  color: #303133;
  font-size: 14px;
  margin-bottom: 4px;
}

.server-ip {
  font-size: 12px;
  color: #909399;
}

.server-metrics {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metric {
  display: flex;
  align-items: center;
  gap: 12px;
}

.metric-label {
  font-size: 12px;
  color: #606266;
  width: 40px;
}

.metric-value {
  font-size: 12px;
  color: #606266;
  width: 40px;
  text-align: right;
}

.alert-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.alert-item:hover {
  background: #f5f7fa;
}

.alert-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.alert-critical {
  background: rgba(245, 108, 108, 0.1);
  color: #f56c6c;
}

.alert-warning {
  background: rgba(230, 162, 60, 0.1);
  color: #e6a23c;
}

.alert-info {
  background: rgba(64, 158, 255, 0.1);
  color: #409eff;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.alert-time {
  font-size: 12px;
  color: #909399;
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .charts-grid,
  .bottom-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
</style>